<template>
	<div>
		<!-- 面包屑头部 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
		  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 添加分类 -->
			<el-row>
				<el-col :span="8">
					<el-button @click ="showADdCateDialog" type='primary'>添加分类</el-button>
				</el-col>
			</el-row>
		
		<!-- 表格 -->
		<tree-table 
		class="treeTable"
		:data='catelist'
		:columns = 'columns'
		:selection-type='false'
		:expand-type='false'
		:show-index = 'true'
		index-text='#'
		border
		>
		<!-- 是否有效 -->
		<template slot="isok" slot-scope="scope">
			<i style="color: red;" v-if="scope.row.cat_deleted === false" class="el-icon-error"></i>
			<i class="el-icon-success" style="color: green;" v-else></i>
		</template>
		<!-- 排序 -->
		<template slot="order" slot-scope="scope">
			<el-tag v-if="scope.row.cat_level===0" size='mini'>一级</el-tag>
			<el-tag v-if="scope.row.cat_level===1" size='mini' type='success'>二级</el-tag>
			<el-tag v-if="scope.row.cat_level===2" size='mini' type='warning'>三级</el-tag>
		</template>	
		<!-- 操作 -->
		<template slot="opt" slot-scope="scope">
			<el-button size='mini' type='primary' icon='el-icon-edit' @click ='updeteCateForm(scope.row.cat_id)'>编辑</el-button>
			<el-button size='mini' type='danger' icon='el-icon-delete' @click='deleteCateList(scope.row.cat_id)'>删除</el-button>
		</template>
		</tree-table>
		
		<!-- 分页区域 -->
		<el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="qureyInfo.pagenum"
		      :page-sizes="[3, 5,10,15]"
		      :page-size="qureyInfo.pagesize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		</el-card>
		
		<!-- 添加对话框 -->
		<el-dialog
		  title="添加分类"
		  @close="addCateDialogClosed"
		  :visible.sync="addCateDialogVisible"
		  width="50%"
		 >
		 <!-- 内容区域 -->
		 <el-form :model="addCateForm" :rules="addCartFormRules" ref="addCartFormRef" label-width="100px">
		   <el-form-item label="分类名称" prop="cat_name">
		     <el-input v-model="addCateForm.cat_name"></el-input>
		   </el-form-item>
		   <el-form-item label="父级分类">
				<el-cascader
				expand-trigger="hover"
				change-on-select
					 clearable
				     v-model="selectedKeys"
				     :options="parentCateList"
				     :props="cascaderProps"
				     @change="parentCateChange">
					 </el-cascader>
		   </el-form-item>
		   </el-form>
		   <!-- 底部区域 -->
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addCateDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addCate">确 定</el-button>
		  </span>
		</el-dialog>
		
		<!-- 编辑对话框 -->
		<el-dialog
		  title="修改对话框"
		  @close="dateCateClose"
		  :visible.sync="dateCateUser"
		  width="50%"
			>
		 <el-form :model="dataCateList" :rules="dataCateRules" ref="dataCateRef" label-width="100px">
		   <el-form-item label="分类名称" prop="cat_name">
		     <el-input v-model="dataCateList.cat_name"></el-input>
		   </el-form-item>
		   </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dateCateUser = false">取 消</el-button>
		    <el-button type="primary" @click="dataCate">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				// 商品分类数据列表
				catelist:[],
				// 商品分类查询条件
				qureyInfo:{
				type:3,
				pagenum:1,
				pagesize:5	
				},
				// 商品分页总条数
				total:0,
				// 为table指定列的定义
				columns:[
					{
						label:'分类属性名',
						prop:'cat_name',
					},
					{
						label:'是否有效',
						// 表示当前页为模板列
						type:'template',
						// 表示当前页使用模板名称
						template: 'isok'
					},
					{
						label:'排序',
						// 表示当前页为模板列
						type:'template',
						// 表示当前页使用模板名称
						template: 'order'
					},
					{
						label:'操作',
						// 表示当前页为模板列
						type:'template',
						// 表示当前页使用模板名称
						template: 'opt'
					},
				],
				// 添加对话框显示与隐藏
				addCateDialogVisible:false,
				// 添加分类的表单数据对象
				addCateForm:{
					// 添加分类名称
					cat_name:'',
					// 添加分类父级ID
					cat_pid:0,
					// 添加分类默认等级
					cat_level:0,
					
				},
				// 添加分类表单验证规则
				addCartFormRules:{
					cat_name:[
						{required:true,message:'请输入分类名称',trigger: 'blur'},		
					],
				},
				// 父级分类列表
				parentCateList:[],
				// 指定级联选择器的配置对象
				cascaderProps:{
					value:'cat_id',
					label:'cat_name',
					children:'children'
				},
				// 选择的父级分类Id数组
				selectedKeys:[],
				// 修改对话框显示与隐藏
				dateCateUser:false,
				// 修改对话框绑定数据
				dataCateList:{},
				// 修改对话框校验规则
				dataCateRules:{
					cat_name:[
						{required:true,message:'请输入分类名称',trigger: 'blur'},	
						
					]
				},
			}
		},
		created() {
			this.getCateList()
		},
		methods:{
			// 获取商品分类列表
			async getCateList(){
				const {data:res} = await this.$http.get('categories',{params:this.qureyInfo})
				// console.log(res)
			if(res.meta.status !=200 ){
				return this.$message.error('获取商品分类信息失败')
			}
			this.catelist = res.data.result
			this.total = res.data.total
			},
			// 监听pagesize改变事件
			handleSizeChange(newpage){
				this.qureyInfo.pagesize = newpage
				this.getCateList()
			},
			// 监听pagenum页码改变
			handleCurrentChange(newnum){
				this.qureyInfo.pagenum = newnum
				this.getCateList()
			},
			// 点击按钮打开添加对话框
			showADdCateDialog(){
				this.getParentCateList()
				this.addCateDialogVisible = true
			},
			// 获取分类数据的列表
			async getParentCateList(){
			const {data:res} = await this.$http.get('categories',{params:{type:2}})
			// console.log(res)
			if(res.meta.status !== 200){
				return this.$message.error('获取分类失败')
			}
			this.parentCateList= res.data
			},
			// 选择项发生变化触发这个
			parentCateChange(){
				// console.log(this.selectedKeys)
			// 如果selectedKeys 数组 length大于0,代表选择,反之没有选择
			if(this.selectedKeys.length>0){
				this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length -1]
				this.addCateForm.cat_level = this.selectedKeys.length
				return
			}else{
				this.addCateForm.cat_pid = 0
				this.addCateForm.cat_level = 0
				return
			}
			},
			// 监听添加对话框的关闭事件
			addCateDialogClosed(){
				this.$refs.addCartFormRef.resetFields()
				this.selectedKeys = [],
				this.addCateForm.cat_level = 0
				this.addCateForm.cat_pid = 0
			},
			// 添加弹框点击按钮
			addCate(){
				// console.log(this.addCateForm)
				this.$refs.addCartFormRef.validate(async valid =>{
					if(!valid) return
					const {data:res} = await this.$http.post('categories',this.addCateForm)
					// console.log(res)
					if(res.meta.status !==201){
						return this.$message.error('添加分类失败')
					}
					this.$message.success('添加分类成功')
					this.getCateList()
					this.addCateDialogVisible = false
				})
				
			},
			// 编辑按钮
			async updeteCateForm(id){
				// console.log(id)
				const {data:res} = await this.$http.get('categories/'+id)
				// console.log(res)
				if(res.meta.status !==200){
					return this.$message.error('获取信息失败')
				}
				this.dataCateList = res.data
				this.dateCateUser = true
			},
			// 监听编辑对话框关闭事件
			dateCateClose(){
				this.$refs.dataCateRef.resetFields()
			},
			// 编辑对话框确定按钮
			dataCate(){
				// console.log(this.dataCateList.cat_id)
				// 表单验证
				this.$refs.dataCateRef.validate(async valid =>{
					if(!valid){
						return this.$message.error('请输入正确名称')
					}
					const {data:res} = await this.$http.put('categories/' +this.dataCateList.cat_id,this.dataCateList)
					if(res.meta.status !==200){
						return this.$message.error('修改名称失败')
					}
					this.getCateList()
					this.dateCateUser = false
					this.$message.success('修改名称成功')
				})
			},
			// 删除点击
			async deleteCateList(id){
			const deleteMess = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
			   confirmButtonText: '确定',
			   cancelButtonText: '取消',
			   type: 'warning'
			  }).catch(resd => resd)
			  // console.log(deleteMess)
			  if(deleteMess !== 'confirm'){
				  return this.$message.error('取消删除操作')
			  }
			  const {data:res} = await this.$http.delete('categories/' +id)
				if(res.meta.status !==200){
					return this.$message.error('删除失败')
				}
				this.getCateList()
				this.$message.success('删除成功')
				this.dateCateUser = false
				
			}, 
		}
	}
</script>

<style lang="less" scoped="scoped">
	.treeTable{
		margin: 10px;
	}
	.el-cascader{
		width: 100%;
	}
</style>
